<script setup>
import { ref, reactive, onMounted } from 'vue'
import { test } from '../http/travel'
import {
  Delete,
  Edit,
  Search,
  Plus
} from '@element-plus/icons-vue'

const multipleTableRef = ref('')
const multipleSelection = ref('')
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: ''
})
const onSubmit = () => {
  console.log('submit!')
}
const tableData = [
  {
    routeId: '1',
    day: '2',
    scheduleType: 'test',
    startTime: '2020-09-09',
    endTime: '2021-09-09',
    desc: 'test',
    spendTime: '50',
    createTime: '2022-09-09'
  }, {
    routeId: '1',
    day: '2',
    scheduleType: 'test',
    startTime: '2020-09-09',
    endTime: '2021-09-09',
    desc: 'test',
    spendTime: '50',
    createTime: '2022-09-09'
  }, {
    routeId: '1',
    day: '2',
    scheduleType: 'test',
    startTime: '2020-09-09',
    endTime: '2021-09-09',
    desc: 'test',
    spendTime: '50',
    createTime: '2022-09-09'
  }
]
onMounted(() => {
  test()
})
</script>

<template>
  <el-tab-pane class="test">
    <template #label>
      <span class="tab-item">公告管理</span>
    </template>
    <div class="content-container">
      <div class="table-container">
        <el-button-group class="btns">
          <el-button type="success" :icon="Plus">添加</el-button>
          <el-button type="primary" :icon="Edit" disabled>编辑</el-button>
          <el-button type="danger" :icon="Delete" disabled>删除</el-button>
        </el-button-group>
        <div class="searchBox">
          <el-input
            v-model="input2"
            class="w-50 m-2"
            placeholder="以任意内容检索"
            :suffix-icon="Search"
            width="200"
          />
        </div>
        <el-table
          ref="multipleTableRef"
          :data="tableData"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"/>
          <el-table-column label="公告标题" property="routeId"/>
          <el-table-column property="day" label="公告内容"/>
          <el-table-column property="startTime" label="发布时间" sortable/>
        </el-table>
        <div class="pagination">
          <el-pagination background layout="prev, pager, next" :total="1000" />
        </div>
      </div>
      <div class="insert-modal">
        <el-form :model="form" label-width="120px">
          <el-form-item label="公告标题">
            <el-input v-model="input" placeholder="Please input" />
          </el-form-item>
          <el-form-item label="发布时间">
            <el-col :span="3">
              <el-date-picker
                v-model="form.date1"
                type="datetime"
                placeholder="发布时间"
              />
            </el-col>
            <el-col :span="2"></el-col>
          </el-form-item>
          <el-form-item label="公告内容">
            <el-input v-model="form.desc" type="textarea" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确定</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>

    </div>
  </el-tab-pane>
</template>

<style scoped>
.content-container{
  text-align: left;
  margin-left: 20px;
}
.btns {
  margin: 0px 0 10px 13px;
  vertical-align: top !important;
}

.pagination {
  margin-top: 10px;
  display: flex;
  justify-content: right;
}

.searchBox {
  display: inline-block;
  margin-left: 10px;
}
</style>
